<template>
  <div class="qie">
    <div class="top">
      <span :class="{ bg: zt == '详情' }" @click="qie('详情')">详情</span>
      <span :class="{ bg: zt == '评价' }" @click="qie('评价')">评价</span>
    </div>
    <!-- 活动详情的详情部分 -->
    <div v-if="zt == '详情'" class="xiangqin">
      <p>{{ sch.content }}</p>
    </div>
    <!-- 活动详情的评价部分 -->
    <div v-if="zt == '评价'" class="pinjia">
      <div class="pinjia-box">
        <ul>
          <li v-for="value in dataUser" :key="value.id" class="pinjia-li">
            <div class="pinjia-left">
              <img :src="value.imgurl" alt="" />
            </div>
            <div class="pinjia-right">
              <div class="pinjia-user">
                <span>{{ value.username }}</span>
                <span>12分钟前</span>
              </div>
              <div class="pinjia-text">
                <p>
                  旅游感悟常人说:“不登山，不知山高;不涉水，不晓水深;不赏奇景，怎知其绝妙。”“读万卷书，还须行万里路。”只有亲身实践，身临其境，才有切身体会。登高一望，才会领略到杜甫“会当凌绝顶，一览众山小”的气魄;驻足山中，才会感受到鲁迅先生“躲进小楼成一统，管他春夏与秋冬”的奥秘;跋山涉水，才能体会到李白“五岳寻仙不辞迈，一生好入名山游”的追求。一旦大自然别样的风景去占据视野和思想，你会觉得，生活并不总是乏味，一切都是那么完美，处处充满阳光。
                </p>
              </div>
              <div>
                <span class="iconfont icon-dianzan">135</span>
                <span class="iconfont icon-xihuan">246</span>
              </div>
            </div>
          </li>
          <div class="moreDiscuss"
               @click="more">
            <p>更多评论</p>
          </div>
        </ul>
      </div>
    </div>
    <div></div>
    <div @click="lian" class="foot">
      <span>立即报名</span>
    </div>
  </div>
</template>

<script>
// import MoreDiscuss from "@/components/Huodon/Morediscuss.vue";

export default {
  name: "box",
  props: ["sch"],
  data() {
    return {
      zt: "详情",
      dataUser: [],
    };
  },
  methods: {
    qie(value) {
      this.zt = value;
    },
    lian() {
      this.$router.push({ name: "Baomin" });
    },
    more() {
      this.$router.push({ name: "Discuss" });
    },
  },
  mounted() {
    this.ajax({
      method: "get",
      url: "/queryAlluser",
    }).then((res) => {
      this.dataUser = res.data;
      console.log(this.dataUser);
    });
  },
};
</script>

<style lang="scss" scoped>
@import "https://at.alicdn.com/t/font_2877559_mhrkss1z97.css?spm=a313x.7781069.1998910419.46&file=font_2877559_mhrkss1z97.css";
.pinjia-box {
  height: 415px;
  overflow: scroll;
}
.foot {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: rgb(129, 172, 236);
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  > span {
    color: white;
    font-size: 20px;
  }
}
.xiangqin {
  padding: 10px;
  box-sizing: border-box;
  > p {
    text-indent: 2em;
    // margin-top: 10px;
  }
}

.top {
  margin-top: 10px;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  border: 1px solid rgba(119, 119, 119, 0.678);
  > span {
    width: 50%;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
}
.bg {
  border-bottom: 3px solid rgb(91, 91, 255);
}

.pinjia-box {
  // margin-bottom: 70px;
  .pinjia-li {
    margin: 15px 10px;
    display: flex;
    justify-content: space-between;

    .pinjia-left {
      img {
        width: 35px;
        margin-right: 5px;
        border-radius: 50%;
      }
    }
    .pinjia-right {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #e4e4e4;

      .pinjia-user {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 18px;
          color: #323232;
        }
      }

      .pinjia-text {
        width: 315px;
        margin: 6px 0px;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 4;
        }
      }
    }
  }

  .moreDiscuss {
    width: 100px;
    height: 130px;
    margin-left: 265px;
    text-align: center;
    line-height: 40px;
    p {
      background-color: gray;
    }
  }
}
</style>